<script setup>
import { ref, onMounted, nextTick } from 'vue'
import axios from 'axios'
import { ElMessage } from "element-plus";
// 表单数据
const company = ref({})
// 公司图片文件
const imageFile = ref(null)
// 公司二维码文件
const qrCodeFile = ref(null)

onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:8080/company/1') // 假设获取id为1的公司信息，可根据实际调整
    await nextTick()
    company.value = response.data
    console.log("_______________________")
    console.log(response.data)
    console.log("++++++++++++++++++++++++++")
  } catch (error) {
    ElMessage.error('获取公司信息失败')
  }
})

// 上传公司图片
const uploadImage = async () => {
  if (!imageFile.value) {
    ElMessage.warning('请选择公司图片')
    return
  }
  const formData = new FormData()
  formData.append('file', imageFile.value)
  try {
    const response = await axios.post('http://localhost:8080/img/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    console.log("------------------------------------------------")
    console.log(company.value.image.data)
    console.log("++++++++++++++++++++++++++++")
    console.log(response.data.image)
    console.log(company)
    company.value.image = response.data.image
    ElMessage.success('公司图片上传成功')
  } catch (error) {
    ElMessage.error('公司图片上传失败')
  }
}

// 上传公司二维码
const uploadQrCode = async () => {
  if (!qrCodeFile.value) {
    ElMessage.warning('请选择公司二维码')
    return
  }
  const formData = new FormData()
  formData.append('file', qrCodeFile.value)
  try {
    const response = await axios.post('http://localhost:8080/img/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    company.value.binarycode = response.data.data
    ElMessage.success('公司二维码上传成功')
  } catch (error) {
    ElMessage.error('公司二维码上传失败')
  }
}

// 保存公司信息
const saveCompany = async () => {
  try {
    const id = company.value.id; // 获取公司 ID
    const response = await axios.put(`http://localhost:8080/company/${id}`, company.value);
    if (response.status === 200) {
      ElMessage.success('公司信息更新成功');
    } else {
      ElMessage.error('公司信息更新失败');
    }
  } catch (error) {
    ElMessage.error('公司信息更新失败');
  }
}
</script>

<template>
  <div>
    <el-form :model="company" label-position="left" label-width="120px">
      <el-form-item label="公司名称">
        <el-input v-model="company.companyName"></el-input>
      </el-form-item>
      <el-form-item label="公司地址">
        <el-input v-model="company.adress"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="company.phone"></el-input>
      </el-form-item>
      <el-form-item label="公司邮箱">
        <el-input v-model="company.email"></el-input>
      </el-form-item>
      <el-form-item label="公司简介">
        <el-input v-model="company.introduce"></el-input>
      </el-form-item>
      <el-form-item label="公司图片">
        <el-upload
            class="upload-demo"
            :action="'http://localhost:8080/img/upload'"
            :on-success="(response, file, fileList) => {
                        company.image =  'http://localhost:8080' +response.data
                        ElMessage.success('公司图片上传成功')
                        console.log(response.data)
                    }"
            :before-upload="(file) => {
                        if (!file) {
                            ElMessage.warning('请选择公司图片')
                            return false
                        }
                        return true
                    }"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <img v-if="company.image" :src="company.image"
               style="width: 100px; height: 100px; display: block; margin-top: 10px;">
        </el-upload>
      </el-form-item>
      <el-form-item label="公司二维码">
        <el-upload
            class="upload-demo"
            :action="'http://localhost:8080/img/upload'"
            :on-success="(response, file, fileList) => {
                        company.binarycode = 'http://localhost:8080'+response.data
                        ElMessage.success('公司二维码上传成功')
                    }"
            :before-upload="(file) => {
                        if (!file) {
                            ElMessage.warning('请选择公司二维码')
                            return false
                        }
                        return true
                    }"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <img v-if="company.binarycode" :src="company.binarycode"
               style="width: 100px; height: 100px; display: block; margin-top: 10px;">
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveCompany">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.upload-demo {
  width: 200px;
}
</style>